<template>
    <div>
        <div class="main">
            <!--      基础控件      -->
            <el-card class="atom-panel">
                <template #header>
                    <div class="card-header">
                        <div class="text-icon">
                            <span>💡</span>
                        </div>
                        <span>设置选项</span>
                    </div>
                </template>
                <div style="margin-bottom: 10px" @click="choose = index" :key="index" v-for="(item,index) in settingOptions">
                    <el-card :class="(choose === index ? 'color':'') + ' dra-card cardItem'" style="cursor: pointer;">
                        <el-icon :size='14'>
                            <component :is="item.icon"/>
                        </el-icon>
                        {{ item.name }}
                    </el-card>
                </div>
            </el-card>
            <!--      表单区域      -->
            <el-card class="form-panel test-1">
                <template #header>
                    <div class="card-header">
                        <div class="text-icon">
                            <span>📑</span>
                        </div>
                        <span>表单区域</span>
                    </div>
                </template>
                <div>
                    <el-card :class="'cardItem'">
                        <el-icon :size='14'>
                            <component :is="settingOptions[choose].icon"/>
                        </el-icon>
                        {{ settingOptions[choose].name }}
                        <set-panel :obj="settingOptions[choose]"></set-panel>
                    </el-card>
                </div>
            </el-card>
            <!--      编辑控件      -->
            <el-card class="setting-panel">
                <template #header>
                    <div class="card-header">
                        <div class="text-icon">
                            <span>⚙️</span>
                        </div>
                        <span>编辑控件</span>

                    </div>
                </template>

            </el-card>
            <operation-button :model="form"></operation-button>
        </div>
    </div>
</template>
<script lang="ts">
import {defineComponent, reactive, toRefs} from 'vue'
import operationButton from "../components/operationButton.vue";
import setPanel from "../components/setting/setPanel.vue"
import settingOptions from '../config/settingOptions.js'

export default defineComponent({
    components: {operationButton,setPanel},
    setup() {
        const data = reactive({
            drag: false,
            settingOptions: settingOptions,
            choose: 0,
            form: [],
            show: false
        })
        return {...toRefs(data)}
    },
    methods: {
    }
})
</script>
<style lang="scss" scoped>
.cardItem {
    position: relative;
    animation: cardIn 1s;
    -webkit-animation: cardIn 1s; /* Safari and Chrome */
}

@keyframes cardIn {
    0% {
        top: -10px;
    }
    100% {
        top: 0;
    }
}

.formCard {
    min-width: 630px;
    margin: 10px;
    cursor: pointer
}

.main {
    position: absolute;
    top: 20px;
    left: 20px;
    width: calc(100% - 20px);
    height: calc(100% - 40px);
    display: flex;

    .card-header {
        text-align: center;

        .text-icon {
            &:hover {
                -webkit-animation: spin 1s linear 1s 5 alternate;
                animation: spin 1s linear infinite;
            }
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    }

    .atom-panel {
        min-width: 340px;
        height: 100%;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .form-panel {
        width: calc(100% - 820px);
        min-width: 700px;
        height: calc(100% - 30px);
        margin: 0 10px;
        padding-bottom: 30px;
    }

    .setting-panel {
        min-width: 435px;
        height: 100%;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }
}

:deep(.el-button+.el-button) {
    margin-left: 6px;
}

:deep(.el-card__body) {
    height: calc(100% - 100px);
    overflow-y: auto;
}

:deep(.el-card__body)::-webkit-scrollbar { /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 8px;
}
</style>
